<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="js/vue.js"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		<div id="app">

			<router-link to="/father">father</router-link>
			<router-view></router-view>

		</div>

		<template id="father">

			<div>
				<h1>father</h1>
				<hr />
				<router-link to="/father/login">登录</router-link>
				<router-link to="/father/reg">注册</router-link>
				<router-view></router-view>
			</div>

		</template>

		<script>
			var father = {
				template: "#father"
			}
			
			
			var login = {
				template:"<h1>登录</h1>"
			}
			
			var reg = {
				template:"<h1>注册</h1>"
			}
			
			var routerObj = new VueRouter({

				routes: [{
					path: "/father",
					component: father,
					children:[
						{path:"login",component:login},
						{path:"reg",component:reg},
					]
				}]

			});

			var vm = new Vue({
				el: "#app",
				data: {

				},
				methods: {

				},
				router: routerObj

			});
		</script>
	</body>

</html>